<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:h="http://java.sun.com/jsf/html">

<ui:composition template="/template.xhtml">
   <ui:define name="page.title">
      #{msg['order.cart']}
   </ui:define>
   
   <ui:define name="page.content">
      <h:outputStylesheet library="css" 
         name="ui-lightness/jquery-ui-1.8.21.custom.css" />
      <h:outputScript library="js" 
         name="jquery-ui-1.8.21.custom.min.js" />
      <h:outputScript name="jquery.dataTables.js" library="js" />
      <h:outputScript name="jquery.json-2.3.js" library="js" />
      <h:outputScript name="cart.js" library="js" />
      
      <div id="client-data">
         <label>#{msg['client.register.label.name']}</label>
         <input id="client-name" type="text" 
            value="XPTO" disabled="disabled" style="width: 560px;"/>
         <br/>
         <label>#{msg['client.register.label.document']}</label>
         <input id="client-document" type="text" 
            value="XPTO" disabled="disabled" style="width: 180px;"/>
         <label>#{msg['client.register.label.email']}</label>
         <input id="client-email" type="text" 
            value="XPTO" disabled="disabled" style="width: 280px;"/>
         
         <br/>
         <label>#{msg['client.register.label.phone']}</label>
         <input id="client-phone" type="text" 
            value="XPTO" disabled="disabled" style="width: 180px;"/>

         <br/>
         <label>Endereço</label>
         <input id="client-street" type="text" 
            value="XPTO" disabled="disabled" style="width: 220px;"/>
         <label>Número</label>
         <input id="client-number" type="text" 
            value="XPTO" disabled="disabled" style="width: 50px;"/>
         <label>Bairro</label>
         <input id="client-neighborhood" type="text" 
            value="XPTO" disabled="disabled" style="width: 120px;"/>
            
         <br/>
         <label>Cidade</label>
         <input id="client-city" type="text" 
            value="XPTO" disabled="disabled" style="width: 280px;"/>
         <label>Estado</label>
         <input id="client-state" type="text" 
            value="XPTO" disabled="disabled" style="width: 80px;"/>
      </div>
      
      <div id="dialog-message" title="Adicionando ao carrinho"
         style="display: none; font-size: 13px;">
         <p>
            <span id="selected-product"></span><br/>
            Você deseja realmente cancelar o pedido?
         </p>
      </div>

      <div id="confirm-message" title="Adicionando ao carrinho"
         style="display: none; font-size: 13px;">
         <p>
            <span id="msg-content" style="font-size: 13px;"></span><br/>
         </p>
      </div>
      
      <div id="datagrid">
         <table cellpadding="0" cellspacing="0" 
            border="0" class="display" id="orderGrid">
            
            <thead>
               <tr>
                  <th width="60%">
                     #{msg['product.register.label.name']}
                  </th>
                  <th width="20%">
                     #{msg['product.register.label.model']}
                  </th>
                  <th width="10%">
                     #{msg['product.register.label.stock']}
                  </th>
                  <th width="10%">
                     #{msg['product.register.label.price']}
                  </th>
               </tr>
            </thead>
            
            <tbody class="ui-datatable-data ui-widget-content" />
            
            <tfoot>
               <tr>
                  <th width="60%">
                     #{msg['product.register.label.name']}
                  </th>
                  <th width="20%">
                     #{msg['product.register.label.model']}
                  </th>
                  <th width="10%">
                     #{msg['product.register.label.stock']}
                  </th>
                  <th width="10%">
                     #{msg['product.register.label.price']}
                  </th>
               </tr>
            </tfoot>
            
         </table>
      </div>
      
      <div id="order-commands" style="margin-top: 20px;">
         <button id="btn-save">#{msg['order.finalize']}</button>
         <button id="btn-cancel">#{msg['order.cancel']}</button>
         <a href="search.jsf">#{msg['order.continue']}</a>
      </div>
      
   </ui:define>
</ui:composition>

</html>
